CSS @when-regelen: Mestre betinget stilsetting

CSS-verdenen er i konstant utvikling, og tilbyr utviklere kraftigere og mer fleksible måter å style nettsider på. En slik funksjon som vinner terreng er @when-regelen, også kjent som CSS Conditional Rules Module Level 1. Denne regelen lar deg anvende CSS-stiler betinget, basert på at spesifikke betingelser er oppfylt. Det er et kraftig verktøy for responsivt design, funksjonsdeteksjon og for å lage mer robuste og tilpasningsdyktige stilark.

Hva er CSS @when-regelen?

@when-regelen er en betinget at-regel i CSS som lar deg definere stiler som kun anvendes hvis visse betingelser er sanne. Tenk på det som en if-setning for din CSS. I motsetning til mediespørringer, som primært fokuserer på visningsportens egenskaper (skjermstørrelse, orientering osv.), gir @when en mer generell og utvidbar måte å håndtere betinget stilsetting på. Den utvider eksisterende betingede at-regler som @supports og @media.

Viktige fordeler med å bruke @when

• Forbedret lesbarhet i koden: Ved å kapsle inn betinget logikk i @when-blokker, gjør du CSS-en din enklere å forstå og vedlikeholde. Hensikten bak spesifikke stilanvendelser blir tydeligere.
• Økt fleksibilitet: @when kan håndtere mer komplekse betingelser enn tradisjonelle mediespørringer, spesielt når den kombineres med funksjonsspørringer og JavaScript-drevet logikk (ved bruk av CSS Custom Properties).
• Forenklet funksjonsdeteksjon: @when integreres sømløst med @supports, noe som lar deg anvende stiler kun når spesifikke nettleserfunksjoner er tilgjengelige. Dette er avgjørende for progressiv forbedring (progressive enhancement).
• Mer semantisk stilsetting: @when lar deg style elementer basert på deres tilstand eller kontekst, noe som fører til mer semantisk og vedlikeholdbar CSS. For eksempel, stilsetting av elementer basert på dataattributter eller egendefinerte egenskaper satt av JavaScript.

Syntaksen for @when-regelen

            @when <condition> {
  /* CSS-regler som skal anvendes når betingelsen er sann */
}
            

              
                Copy
              
            
          

<condition> kan være et hvilket som helst gyldig boolsk uttrykk som evalueres til sant eller usant. Dette uttrykket involverer ofte:

• Mediespørringer: Betingelser basert på visningsportens egenskaper (f.eks. skjermbredde, enhetsorientering).
• Funksjonsspørringer (@supports): Betingelser basert på nettleserstøtte for spesifikke CSS-funksjoner.
• Boolsk algebra: Kombinering av flere betingelser ved hjelp av logiske operatorer (and, or, not).

Praktiske eksempler på @when i bruk

La oss utforske noen praktiske eksempler for å illustrere kraften og allsidigheten til @when-regelen.

1. Responsivt design med @when og mediespørringer

Det vanligste bruksområdet for @when er responsivt design, der du justerer stiler basert på skjermstørrelse. Selv om mediespørringer kan oppnå dette alene, gir @when en mer strukturert og lesbar tilnærming, spesielt når man håndterer komplekse betingelser.

            @when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}
            

              
                Copy
              
            
          

I dette eksempelet blir stilene i @when-blokken kun anvendt når skjermbredden er mellom 768px og 1023px (typisk nettbrettstørrelse). Dette gir en klar og konsis måte å definere stiler for spesifikke visningsportområder.

Merknad om internasjonalisering: Responsivt design er avgjørende for et globalt publikum. Vurder varierende skjermstørrelser på tvers av forskjellige regioner. For eksempel er mobilbruk høyere i noen land, noe som gjør mobil-først-design enda viktigere.

2. Funksjonsdeteksjon med @when og @supports

@when kan kombineres med @supports for å anvende stiler kun når en spesifikk CSS-funksjon støttes av nettleseren. Dette lar deg progressivt forbedre nettstedet ditt, og gir en bedre opplevelse for brukere med moderne nettlesere, samtidig som kompatibiliteten med eldre nettlesere opprettholdes.

            @when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Reserve-stiler for nettlesere som ikke støtter grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Juster bredde for eldre nettlesere */
  }
}
            

              
                Copy
              
            
          

Her bruker vi @supports for å sjekke om nettleseren støtter CSS Grid Layout. Hvis den gjør det, anvender vi rutenettbaserte stiler på .container. Hvis ikke, gir vi reserve-stiler (fallback) ved hjelp av flexbox for å sikre at et lignende oppsett oppnås i eldre nettlesere.

Global merknad om tilgjengelighet: Funksjonsdeteksjon er viktig for tilgjengelighet. Eldre nettlesere kan mangle støtte for nyere ARIA-attributter eller semantiske HTML5-elementer. Sørg for passende reserve-løsninger for å sikre at innholdet forblir tilgjengelig.

3. Kombinere mediespørringer og funksjonsspørringer

Den virkelige kraften til @when kommer fra dens evne til å kombinere mediespørringer og funksjonsspørringer for å lage mer komplekse og nyanserte betingede stilregler.

            @when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}
            

              
                Copy
              
            
          

I dette eksempelet vil .modal-elementet kun ha en uskarp bakgrunn når skjermbredden er minst 768px og nettleseren støtter backdrop-filter-egenskapen. Dette lar deg lage visuelt tiltalende effekter på moderne nettlesere, samtidig som du unngår potensielle ytelsesproblemer eller gjengivelsesfeil på eldre.

4. Stilsetting basert på egendefinerte egenskaper (CSS-variabler)

@when kan også brukes sammen med CSS Custom Properties (også kjent som CSS-variabler) for å skape dynamisk og tilstandsdrevet stilsetting. Du kan bruke JavaScript til å oppdatere verdien av en egendefinert egenskap, og deretter bruke @when for å anvende forskjellige stiler basert på den verdien.

Først, definer en egendefinert egenskap:

            :root {
  --theme-color: #007bff; /* Standard temafarge */
  --is-dark-mode: false;
}

            

              
                Copy
              
            
          

Bruk deretter @when for å anvende stiler basert på verdien til den egendefinerte egenskapen:

            @when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

            

              
                Copy
              
            
          

Til slutt, bruk JavaScript for å veksle verdien til den egendefinerte egenskapen --is-dark-mode:

            document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
            

              
                Copy
              
            
          

Dette lar brukere bytte mellom lyst og mørkt tema, der CSS-en oppdateres dynamisk basert på verdien til den egendefinerte egenskapen. Merk at direkte sammenligning av CSS-variabler i `@when` kanskje ikke er universelt støttet på tvers av nettlesere. I stedet må du kanskje bruke en omvei med en mediespørring som sjekker for en verdi som ikke er null:

            @when ( --is-dark-mode > 0 ) { ... }
            

              
                Copy
              
            
          

Sørg imidlertid for at den egendefinerte egenskapen har en numerisk verdi for at dette skal fungere korrekt.

Merknad om tilgjengelighet: Å tilby alternative temaer (f.eks. mørk modus) er avgjørende for tilgjengelighet. Brukere med synshemninger kan ha nytte av temaer med høy kontrast. Sørg for at temabyttet ditt er tilgjengelig via tastatur og skjermlesere.

5. Stilsetting basert på dataattributter

Du kan også bruke @when med dataattributter for å style elementer basert på deres dataverdier. Dette kan være nyttig for å lage dynamiske grensesnitt der elementer endrer utseende basert på brukerinteraksjon eller dataoppdateringer.

La oss for eksempel si at du har en liste med oppgaver, og hver oppgave har et data-status-attributt som indikerer statusen (f.eks. "todo", "in-progress", "completed"). Du kan bruke @when for å style hver oppgave forskjellig basert på dens status.

            [data-status="todo"] {
  /* Standardstiler for todo-oppgaver */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}
            

              
                Copy
              
            
          

Merk: støtte for `attribute()`-testbetingelsen kan være begrenset eller ikke fullt implementert i alle nettlesere for øyeblikket. Test alltid grundig.

Nettleserkompatibilitet og polyfills

Per slutten av 2024 er nettleserstøtten for @when-regelen fortsatt under utvikling. Mens mange moderne nettlesere støtter kjernefunksjonaliteten, er det ikke sikkert at noen eldre nettlesere gjør det. Derfor er det avgjørende å sjekke kompatibilitetstabeller og bruke passende reserve-løsninger eller polyfills der det er nødvendig.

Konsulter alltid ressurser som Can I use... for å sjekke den nåværende statusen for nettleserstøtte for @when og relaterte funksjoner.

Beste praksis for bruk av @when

• Hold betingelsene enkle: Unngå altfor komplekse betingelser i @when-blokker. Bryt ned kompleks logikk i mindre, mer håndterbare biter.
• Sørg for reserve-løsninger (fallbacks): Gi alltid reserve-stiler for nettlesere som ikke støtter funksjonene du bruker i @when-reglene dine. Dette sikrer en konsistent opplevelse på tvers av forskjellige nettlesere.
• Test grundig: Test CSS-en din i en rekke nettlesere og enheter for å sikre at @when-reglene dine fungerer som forventet.
• Bruk meningsfulle kommentarer: Legg til kommentarer i CSS-en din for å forklare formålet med hver @when-regel og betingelsene den er basert på. Dette vil gjøre koden din enklere å forstå og vedlikeholde.
• Vurder ytelse: Unngå overdreven bruk av @when-regler, da de potensielt kan påvirke ytelsen. Optimaliser CSS-en din for å minimere antall regler som må evalueres.

Konklusjon

@when-regelen er et kraftig tillegg til CSS-verktøykassen, og tilbyr utviklere en mer fleksibel og uttrykksfull måte å anvende stiler betinget på. Ved å kombinere den med mediespørringer, funksjonsspørringer og CSS Custom Properties, kan du lage mer robuste, tilpasningsdyktige og vedlikeholdbare stilark. Selv om nettleserstøtten fortsatt er under utvikling, er @when en funksjon verdt å utforske og innlemme i din moderne arbeidsflyt for webutvikling.

Ettersom nettet fortsetter å utvikle seg, vil mestring av funksjoner som @when være avgjørende for å skape engasjerende, tilgjengelige og ytelsesterke opplevelser for brukere over hele verden. Omfavn kraften i betinget stilsetting og lås opp nye muligheter i din CSS-utvikling.